<template>
    <router-view />
    <!-- 底部导航 -->
    <footer>
        <div v-for="(item, index) in footer" :key="item.id" @click="changeView(item, index)">
            <img :src="index === picIndex ? item.activePic : item.defaultPic" />
            <span :class="{ active: index === picIndex }">{{ item.name }}</span>
        </div>
    </footer>
</template>

<script>
import { defineComponent, ref, reactive, toRefs, onMounted } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
    name: 'Index',
    setup() {
        // 变量
        let data = reactive({
            picIndex: 0,
            footer: [
                {
                    id: 1,
                    activePic: require('@/assets/image/index_select@3x.png'),
                    defaultPic: require('@/assets/image/index_dafault@3x.png'),
                    name: '首页'
                },
                {
                    id: 2,
                    activePic: require('@/assets/image/my_select@3x.png'),
                    defaultPic: require('@/assets/image/my_default@3x.png'),
                    name: '我的'
                }
            ]
        })
        // // 创建路由
        const router = useRouter()
        // 方法
        // 路由跳转
        function changeView(value, i) {
            // console.log('切换', value.name)
            // 设置active颜色
            data.picIndex = i
            // 路由切换
            switch (value.name) {
                case '首页':
                    router.push('/home')
                    break
                case '我的':
                    router.push('/my')
                    break
                default:
                    break
            }
            // 存储当前路径
            sessionStorage.setItem('path', value.name)
        }

        onMounted(() => {
            // 初始化识别路径
            const path = sessionStorage.getItem('path')
            console.log(path)
            if (path) {
                switch (path) {
                    case '首页':
                        router.push('/home')
                        break
                    case '我的':
                        data.picIndex = 1
                        router.push('/my')
                        break
                    default:
                        break
                }
            } else {
                router.push('/home')
            }
        })
        return {
            ...toRefs(data),
            changeView
        }
    }
})
</script>

<style scoped lang="scss">
// 底部导航栏
footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 52px;
    padding: 5px 0;
    background-color: white;

    div {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        img {
            width: 40px;
            height: 40px;
        }

        span {
            font-size: 12px;
            color: #a8a8a8;
        }
    }
}

.active {
    color: #0fbda6;
}
</style>
